<template>
    <div>
        <el-card class="box-card">
            <el-form :inline="true" ref="memberFormData" :model="memberFormData" class="demo-form-inline" size="mini">
                <el-form-item label="用户手机:">
                    <el-input v-model="memberFormData.mobile" placeholder="用户手机"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称:">
                    <el-input v-model="memberFormData.nickname" placeholder="用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="注册时间:">
                <el-date-picker
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="paytime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        :clearable=false
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        size="mini">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="memberFormData.isDisabled" placeholder="状态" style="width: 80px" clearable>
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" size="mini" @click="seachMember">查询</el-button>
                    <el-button type="success" size="mini" @click="resetMember">重置</el-button>
                </el-form-item>

            </el-form>

            <el-divider></el-divider>

            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="用户编号"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="用户手机"
                        align="center"
                >
                    <template slot-scope="scope">
                        <span style="color: #107ec4 ">{{scope.row.mobile}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="昵称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="用户类型"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==0">会员</span>
                        <span v-else>教师</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="gmtCreate"
                        label="注册时间"
                        align="center"
                    >
                </el-table-column>
                <el-table-column
                        prop="isDisabled"
                        label="状态"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isDisabled"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="禁用"
                                inactive-text="正常"
                                @change="changeSwitch(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="editMember(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog
                title="信息修改"
                :visible.sync="editDialogVisible"
                width="30%"
                @closed="closeAddDialog"
        >
            <!--表单的数据绑定-->
            <el-form :model="editMemberFormData"   label-width="70px" class="demo-ruleForm">
                <el-form-item label="用户手机:" prop="mobile" label-width="100px" >
                    <el-input disabled type="text" v-model="editMemberFormData.mobile" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname" label-width="100px">
                    <el-input type="text" v-model="editMemberFormData.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别:" label-width="100px">
                    <template>
                        <el-radio v-model="editMemberFormData.sex" :label="1">男</el-radio>
                        <el-radio v-model="editMemberFormData.sex" :label="2">女</el-radio>
                        <el-radio v-model="editMemberFormData.sex" :label="3">保密</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="年龄:" prop="age" label-width="100px">
                    <el-input type="text" v-model="editMemberFormData.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注:" prop="sign" label-width="100px">
                    <el-input type="textarea" v-model="editMemberFormData.sign" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="quxiao">取 消</el-button>
                <el-button type="primary" @click="queren" >确定</el-button>
            </span>
        </el-dialog>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "memberguanli",
    data(){
        return{
            pageindex:0,
            //指定范围时间
            paytime:[],
            editMemberFormData:{},
            editDialogVisible:false,
            memberFormData:{},
            tableData: [],
            currentPage: 1,
            pageSize:5,
            //总条数
            total:0,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    created(){
      this.init();
    },
    methods:{
        closeAddDialog(){
            this.init();
        },
        queren(){
            var that=this;
            this.$http.post(`member/updateMember`,this.editMemberFormData).then(function (resp) {
                    that.editDialogVisible=false;
            })
        },
        quxiao(){
            this.editDialogVisible=false;
            this.editMemberFormData={};
        },
        changeSwitch(row){
            var that=this;
            this.$http.post(`member/changeStatus`,row).then(function (resp) {

            })
        },
        handleSizeChange(val) {
            this.pageSize=val;
            this.init();
        },
        handleCurrentChange(val) {
            this.currentPage=val;
            this.init();
        },
        editMember(row){
            this.editDialogVisible=true;
            this.editMemberFormData=row;
        },
        seachMember(){
            this.init();
        },
        resetMember(){
            this.memberFormData={};
            this.paytime=[];

        },
        init(){
            if(this.paytime!=null&&this.paytime.length>0){
                this.memberFormData.gmtCreate=this.paytime[0];
                this.memberFormData.gmtModified=this.paytime[1];
            }

            var that=this;
            this.$http.post(`member/findMember/${this.currentPage}/${this.pageSize}`,this.memberFormData).then(function (resp) {
                that.tableData=resp.data.result.records;
                that.total=resp.data.result.total;
            })
        },
    }

}
</script>

<style scoped>

</style>